<template>
	<view class="page">
		<view class="select-unit">
			<view class="select-key">
				车辆名称
			</view>	
			<view class="select-val" @click="showBrand">
				<text class="val" :class="{'placeholder': !brand.name }">{{brand.name ? brand.name : '请选择车辆名称'}}</text>
				<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
			</view>	
		</view>
		<view class="select-unit">
			<view class="select-key">
				车辆型号
			</view>	
			<view class="select-val" @click="showModel">
				<text class="val" :class="{'placeholder': !model.name }">{{model.name ? model.name : '请选择车辆型号'}}</text>
				<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
			</view>	
		</view>
		<view class="select-unit">
			<view class="select-key">
				车型车款详情
			</view>	
			<view class="select-val" @click="showPublicList">
				<text class="val" :class="{'placeholder': !publicItem.name }">{{publicItem.name ? publicItem.name : '请选择车型车款详情'}}</text>
				<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
			</view>	
		</view>
		<view class="select-unit">
			<view class="select-key">
				所属门店
			</view>	
			<view class="select-val" @click="showStores">
				<text class="val" :class="{'placeholder': !store.name }">{{store.name ? store.name : '请选择所属门店'}}</text>
				<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
			</view>	
		</view>
		<view class="checkbox-unit">
			<view class="checkbox-key">
				车辆配置
			</view>	
			<view class="checkbox-val grid">
				<view class="grid-item" 
				 :class="{'active':includeItem(configChecked,item.id)}"
				 v-for="(item,i) in configs" :key="i"
				 @click="tapConfig(item)"
				>
					<text class="txt">{{item.name}}</text>
				</view>
			</view>	
		</view>
		<view class="price-unit">
			<view class="price-key">
				价格设置
			</view>
			<view class="price-top justify-between">
				<view class="p-item align-center">
					<text class="name">日常</text>
					<input type="number" class="inpt" placeholder="请设置日常价格" v-model="price">
					<text class="mark">元</text>
				</view>
			</view>
			<view class="price-bom">
				<view class="p-item align-center" @click="showYajin">
					<text class="name">车辆押金</text>
					<text class="select" v-if="yajin.name">{{yajin.name}}元</text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>
			</view>
			
			<view class="price-bom">
				<view class="p-item align-center" @click="showBase">
					<text class="name">基础服务费</text>
					<text class="select" v-if="base.name">{{base.name}}元</text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>
			</view>
			<!-- 
			后台车行编辑
			<view class="price-bom">
				<view class="p-item align-center" >
					<text class="name">车行服务费</text>
					<text class="select"></text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>
			</view>
			 -->
		</view>
		<view class="select-unit" style="margin-bottom:0;">
			<view class="select-key">
				车牌号
			</view>	
			<view class="select-val">
				<input type="text" placeholder="例：京A88888" class="inpt" v-model="chepai">
			</view>
		</view>
		<view class="radio-unit align-center">
			<view class="key">车辆状态</view>
			<view class="radio-wrap align-center" @click="tapStatus(1)">
				<image :src="status === 1? '/static/radio-checked.png' : '/static/radio-checkun.png'" mode="aspectFill" class="ic"></image>
				<text class="v" :class="{'active': status === 1}">可租</text>
			</view>
			<view class="radio-wrap align-center"  @click="tapStatus(0)">
				<image :src="status === 0? '/static/radio-checked.png' : '/static/radio-checkun.png'" mode="aspectFill" class="ic"></image>
				<text class="v" :class="{'active': status === 0}">占用</text>
			</view>
		</view>
		<selectItems  ref="selectItemsRef" :list="selectList" :checked="selectItem" :type="selectType" @confirm="confirm" />
		
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					提交审核
				</view>
			</template>
		</submit-btn>
	</view>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watch,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import uploadImages from '@/components/upload-images.vue';
import selectItems from './components/selectItems.vue';
const carHandle = defineComponent({
	components:{
		uploadImages,
		selectItems,
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			selectList:[],
			selectItem:[], //选中值
			selectType: 1, //2多选，1单选
			selectKey:'', //brand
			
			id:'',
			info:{},
			
			brands:[],
			brand:{},
			models:[],
			model:{},
			publicList:[],
			publicItem:{}, //子组件选择后将shortname 改name发回
			stores:[],
			store:{},
			configs:[],
			configChecked:[],
			
			price:'',
			// yajin_price:'',
			// base_price:'',
			// service_price:'',
			
			chepai:'',
			status:1,
			
			yajins:[],  //车辆押金
			yajin:{},  
			bases:[],  //车辆基础服务费
			base:{},
	
		})
		onLoad(async (e)=>{
			await getConfig();
			data.id = e.id;
			if(data.id){
				getInfo();
			}
		})
		//编辑
		const getInfo = async()=>{
			const sendData = {
				id:data.id
			}
			const res = await uni.$request('car.info',sendData);
			const info = res.data;
			data.brand = {
				id: info.brand_id,
				name: info.brand_name
			};
			data.model={
				id: info.model_id,
				name: info.model_name
			};
			data.publicItem={
				id: info.carpublic_id,
				name: info.shortname
			};
			data.store={
				id: info.store_id,
				name: info.store_name
			};
			
			let ids = info.config_ids.split(',')
			data.configs.forEach(c=>{
				if(ids.some(i=>i == c.id)){
					data.configChecked.push(c);
				}
			});
			
			data.price = info.price;
			data.yajin = {name:info.yajin_price,id:0 };
			data.base = {name:info.base_price,id:0};
			// data.service_price=info.service_price;
			data.chepai= info.chepai;			
			data.status= info.status;			
		}
		
		
		const showSelect = async (dataListKey,dataItemKey,url,dataChecked=[],sendData={})=>{
			if(data[dataListKey].length ===0){
				const res = await uni.$request(url,sendData);
				if(dataListKey === 'yajins'){
					const tempArr = res.data.yajin_price || [];
					const yajins = [];
					let id = 1;
					
					tempArr.forEach(t=>{
						yajins.push({id: id++,name: t})
					})
					data[dataListKey] = yajins;
					//编辑状态下只返name
					if(!data.yajin.id && data.yajin.name){
						yajins.forEach(y=>{
							if(y.name === data.yajin.name){
								data.yajin.id = y.id;
							}
						})
						dataChecked = [data.yajin]
					}
					
				}else if(dataListKey === 'bases'){
					const tempArr = res.data.base_price || [];
					const bases = [];
					let id = 1;
					tempArr.forEach(t=>{
						bases.push({id: id++, name: t})
					})
					data[dataListKey] = bases;
					//编辑状态下只返name
					if(!data.base.id && data.base.name){
						bases.forEach(b=>{
							if(b.name === data.base.name){
								data.base.id = b.id;
							}
						})
						dataChecked = [data.base]
					}
					
				}else{
					data[dataListKey] = res.data;
				}
			}
			data.selectList = data[dataListKey];
			data.selectItem = dataChecked;
			data.selectKey = dataItemKey;
			
			selectItemsRef.value.showPop();
		}
		
		const showBrand = ()=>{
			let selected = [];
			if(data.brand.id){
				selected = [data.brand];
			}
			showSelect('brands','brand','basedata.car_enum_brandlist',selected);
		}
		const showModel = ()=>{
			if(! uni.$tools.match(data.brand.id,'nonull','请选择车辆名称')){
				return;
			}
			const sendData = {
				brand_id: data.brand.id,
			}
			
			let selected = [];
			if(data.model.id){
				selected = [data.model];
			}
			
			showSelect('models','model','basedata.car_enum_model',selected,sendData);
		}
		const showPublicList = async()=>{
			if(! uni.$tools.match(data.brand.id,'nonull','请选择车辆名称')){
				return;
			}
			if(! uni.$tools.match(data.model.id,'nonull','请选择车辆型号')){
				return;
			}
			const sendData = {
				brand_id: data.brand.id,
				model_id: data.model.id,
			}
			
			let selected = [];
			if(data.publicItem.id){
				selected = [data.publicItem];
			}
			
			
			showSelect('publicList','publicItem','basedata.car_public_list',selected,sendData);
		}
		const showStores = async()=>{
			const sendData = {
				page:1,
				listrow:100,
			}
			
			let selected = [];
			if(data.store.id){
				selected = [data.store];
			}
			
			showSelect('stores','store','basedata.store_list',selected,sendData);
		}
		
		const showYajin = async()=>{
			
			let selected = [];
			if(data.yajin.id){
				selected = [data.yajin];
			}
			
			showSelect('yajins','yajin','car.car_enum_price',selected);
		}
		const showBase = async()=>{
			let selected = [];
			if(data.base.id){
				selected = [data.base];
			}
			showSelect('bases','base','car.car_enum_price',selected);
		}
		const confirm = (checked)=>{
			// console.log('firm checked',checked,checked.length)
			// if(checked.length ===0 ){
			// 	return;
			// }
			
			data[data.selectKey] = checked[0]; //id,name;
			if(data.selectKey == 'brand'){
				data.models = [];
				data.model={};
				data.publicList=[];
				data.publicItem={};
			}else if(data.selectKey == 'model'){
				data.publicList=[];
				data.publicItem={};
			}
			// console.log(data.selectKey,checked[0])
		}
		//获车辆配置
		const getConfig = async ()=>{
			const res = await uni.$request('basedata.car_enum_config');
			data.configs = res.data.list;
		}
		//判断是否包括
		const includeItem=(arr,id)=>{
			return arr.some(a=> a.id === id);
		}
		//点击配置
		const tapConfig =(item)=>{
			if(includeItem(data.configChecked,item.id)){
				data.configChecked = data.configChecked.filter(c => c.id !== item.id);
			}else{
				data.configChecked.push(item);
			}
		}
		//点击是否可用
		const tapStatus =(v)=>{
			data.status = v;
		}

		const selectItemsRef = ref();
		const submitRef = ref();
		const submit= async ()=>{
			if(! uni.$tools.match(data.publicItem.id,'nonull','请选择车型车款详情')){
				return;
			}
			if(! uni.$tools.match(data.store.id,'nonull','请选择所属门店')){
				return;
			}
			if( data.configChecked.length === 0){
				uni.$tools.msg('请选择车辆配置')
				return;
			}
			if(! uni.$tools.match(data.price,'nonull','请设置日常价格')){
				return;
			}
			if(! uni.$tools.match(data.yajin.name,'nonull','请设置车辆押金')){
				return;
			}
			if(! uni.$tools.match(data.base.name,'nonull','请输入基础服务费')){
				return;
			}
			// if(! uni.$tools.match(data.service_price,'nonull','请输入手续费')){
			// 	return;
			// }
			if(! uni.$tools.match(data.chepai,'nonull','请输入车牌号')){
				return;
			}
			const sendData : any={
				carpublic_id: data.publicItem.id,
				store_id: data.store.id,
				config_ids: data.configChecked.map(c => c.id).join(','),
				price: data.price,
				yajin_price: data.yajin.name,
				base_price: data.base.name,
				// service_price: data.service_price,
				chepai: data.chepai,
				status: data.status,
			}
			let url = 'car.car_add';
			if(data.id){
				//编辑
				sendData.id = data.id;
				url = 'car.car_edit'
			}
			let res = await uni.$request(url,sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		}
		return {
			...toRefs(data),
			showBrand,
			showModel,
			showPublicList,
			showStores,
			showYajin,
			showBase,
			tapConfig,
			includeItem,
			tapStatus,
			
			selectItemsRef,
			confirm,
			submitRef,
			submit,
		};
	}
})
export default carHandle;
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding-top: 30rpx;
	padding-bottom: 40rpx;
}
.radio-unit{
	height: 107rpx;
	padding: 0 30rpx;
	.key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-right: auto;
	}
	.radio-wrap{
		height: 107rpx;
		margin-left: 20rpx;
		.ic{
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		.v{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			&.active{
				color: $base-color;
			}
		}
	}
}
.inpt-unit{
	margin-bottom: 40rpx;
	padding: 0 30rpx;
	.inpt-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		
	}
	.inpt-val{
		border-bottom: 2rpx solid #eee;
		.inpt{
			font-size: 24rpx;
			color:#333;
			height: 60rpx;
			line-height: 60rpx;
		}
	}

}
.select-unit{
	margin-bottom: 40rpx;
	padding: 0 30rpx;
	.select-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.select-val{
		border-bottom: 2rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		.val{
			font-size: 24rpx;
			color:#333;
		}
		.ic{
			width: 18rpx;
			height: 18rpx;
		}
		.inpt{
			font-size: 24rpx;
			color:#333;
			height: 60rpx;
			line-height: 60rpx;
		}
	}
}
.upload-unit{
	padding: 0 30rpx;
	.upload-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.imgs-wrap{
		margin-top: 20rpx;
		.img-wrap{
			margin-right: 24rpx;
			.txt{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E0E0E0;
			}
		}
		
	}
}
.checkbox-unit{
	padding: 0 30rpx;
	margin-bottom: 40rpx;
	.checkbox-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.checkbox-val , .grid{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-row-gap: 14rpx;
		grid-column-gap: 20rpx;
		.grid-item {
		  padding: 24rpx 0;
		  background-color: #F1F2F7;
		  text-align: center;
		  .txt {
		    font-size: 26rpx;
		    font-family: PingFang;
		    color: #333333;
		  }
		  &.active{
			 background-color: #3E6FEF;
			 .txt {
			   color: #fff;
			 }
		  }
		  
		}
	}
	.imgs-wrap{
		margin-top: 20rpx;
		.img-wrap{
			margin-right: 24rpx;
			.txt{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E0E0E0;
			}
		}
		
	}
}
.price-unit{
	padding: 0 30rpx;
	margin-bottom: 40rpx;
	.price-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	.p-item{
		height: 80rpx;
		border-bottom: 2rpx solid #eee;
		.name{
			font-size: 24rpx;
			color: #333333;
			margin-right: 15rpx;
		}
		.select{
			flex:1;
			text-align: right;
			font-size: 24rpx;
			padding-right: 20rpx;
			color: #333333;
		}
		.ic{
			width: 18rpx;
			height: 18rpx;
			margin-left: auto;
		}
		.inpt{
			font-size: 24rpx;
			color: #333333;
		}
		.mark{
			padding-left: 4rpx;
			font-size: 24rpx;
			color: #999999;
			height: 50rpx;
			line-height: 50rpx;
		}
	}
	// .price-top{
	// 	margin-bottom: 20rpx;
	// }
	.price-bom{
		.inpt{
			flex:1;
		}
	}
}
.no-unit{
	padding: 0 30rpx;
	margin-bottom: 46rpx;
	.no-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.no-wrap{
		border-radius: 2rpx solid #eee;
		.no-l{
			height: 50rpx;
			margin-right: 20rpx;
			.val{
				max-width: 260rpx;
				min-width: 60rpx;
				font-size: 24rpx;
				color: #333333;
			}
			.ic{
				width: 16rpx;
				height: 16rpx;
				margin-left: 5rpx;
			}
		}
		.inpt{
			flex:1;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
	
}

.p-btn{
	margin: 0 auto;
	width: 670rpx;
	height: 84rpx;
	background: #256ae5;
	border-radius: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	&.disabled{
		background-color: #eee;
	}
}
.clear_mb{
	margin-bottom: 0;
}
</style>
